// 地区模糊查询
import React from 'react';
import { Select, Spin } from 'antd';
import { connect } from 'dva';
import HOCSelect from '@/components/AntDesign/Select';

const { Option } = Select;

@connect(({ publicdata: { areaList }, loading }) => ({
  areaList,
  loading: loading.effects['publicdata/fetchAreaList'],
}))
class Area extends React.Component {
  /* componentWillUnmount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'publicdata/getAreaList',
      payload: [],
    });
  } */

  // 获取地址
  search = value => {
    const { dispatch, isContainNation = false } = this.props;
    if (value.trim().length) {
      dispatch({
        type: 'publicdata/fetchAreaList',
        payload: { areaName: value.trim(), isContainNation },
      });
    }
  };

  render() {
    const { areaList = [], loading } = this.props;
    return (
      <HOCSelect
        labelInValue
        placeholder="请输入关键字检索"
        {...this.props}
        showSearch
        filterOption={false}
        showArrow={false}
        onSearch={this.search}
        notFoundContent={loading ? <Spin size="small" /> : null}
        loading={false}
      >
        {areaList.map(item => (
          <Option key={item.areaId} title={item.areaName}>
            {item.areaName}
          </Option>
        ))}
      </HOCSelect>
    );
  }
}
export default Area;
